import React, {useEffect, useState} from "react";
import {Text} from "react-native-elements";
import {Dimensions, ScrollView, StyleSheet, TouchableHighlight, View} from "react-native";
import {fontSize_12, fontSize_15, fontSize_16} from "./theme";
import {SvgXml} from "react-native-svg";
import {
    eyeSvgXml_importWay,
    keySvgXml_importWay,
    rightSvgXml,
    timeSvgXml_importWay,
    writeSvgXml_importWay
} from "../libs/svgXml";

const {width,height,scale} = Dimensions.get("window");

const L2_ImportWay = ({navigation,route}:any) => {
    const [providerUrl,setProviderUrl] = useState(route?.params?.providerUrl)
    const [chainID,setChainID] = useState(route?.params?.chainID)
    const [netListItem,setNetListItem] = useState([
        {
            leftSvg: keySvgXml_importWay,
            title:"私钥导入",
            content:"通过铭文私钥或者扫描二维码进行导入",
            svgSize:25,
            onPress:()=>{
                navigation.navigate("L2_ImportByKeyOrMnemonic",{importWay:"privateKey",providerUrl,chainID})
            }
        },
        {
            leftSvg: writeSvgXml_importWay,
            title:"助记词导入",
            content:"通过助记词或扫描二维码进行导入",
            svgSize:30,
            onPress:()=>{
                navigation.navigate("L2_ImportByKeyOrMnemonic",{importWay:"mnemonic",providerUrl,chainID})
            }
        },
        {
            leftSvg: timeSvgXml_importWay,
            title:"Keystore导入",
            content:"输入keystore文件内容或者扫描二维码进行导入",
            svgSize:20,
            onPress:()=>{
                navigation.navigate("L2_ImportByKeystore",{importWay:"Keystore",providerUrl,chainID})
            }
        },
        {
            leftSvg: eyeSvgXml_importWay,
            title:"观察钱包",
            content:"无需导入私钥，输入账号或者对应公钥即可导入",
            svgSize:25,
            onPress:()=>{
                console.log(0)
            }
        },
    ]);
    useEffect(()=>{
        navigation.setOptions({
            title:"导入方式"
        })
        console.log(providerUrl)
    },[])

    return (
        <View style={styles.container}>
            <View style={styles.divider_10}>
            </View>
            <ScrollView style={{width: "100%"}} fadingEdgeLength={20} showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
                {
                    netListItem.map((item,index)=>{
                        return (
                            <TouchableHighlight underlayColor={"transparent"} onPress={item.onPress} key={index+"_MineList"}>
                                <View style={styles.pageView}>
                                    <View style={{
                                        borderBottomWidth:1,borderBottomColor:"transparent",
                                        width:35,height:35,backgroundColor:"#2980fe",
                                        borderRadius:17.5,alignItems:"center",justifyContent:"center"
                                    }}>
                                        <SvgXml xml={item.leftSvg} width={item.svgSize} height={item.svgSize} />
                                    </View>
                                    <View style={{flex:1,height:90,marginLeft:10,alignItems:"center",flexDirection:"row",borderBottomColor:"#f5f5f5",borderBottomWidth:1}}>
                                        <View style={{flex:1,flexDirection:"column",alignItems:"flex-start"}}>
                                            <Text style={{fontSize:fontSize_16,lineHeight:25}}>{item.title}</Text>
                                            <Text style={{fontSize:fontSize_12,color:"#9fa1a6",lineHeight:25}}>{item.content}</Text>
                                        </View>
                                        <SvgXml xml={rightSvgXml()} width={20} height={20}/>
                                    </View>
                                </View>
                            </TouchableHighlight>
                        )
                    })
                }
            </ScrollView>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        backgroundColor: "white"
    },
    divider_10:{
        width:width,
        height:10,
        backgroundColor:"#f6f6f6",
        alignItems:"center",
        flexDirection:"row"
    },
    mainTitle:{
        fontSize:fontSize_15,
        color:"#a9aaaf"
    },
    pageView:{
        width:"100%",
        // height:55,
        backgroundColor:"white",
        flexDirection:"row",
        alignItems:"center",
        paddingLeft:10,
        paddingRight:10,
    },
    addNewNet:{
        width:200,
        height:40,
        backgroundColor:"#ebf4ff",
        alignSelf:"center",
        marginTop:20,
        justifyContent:"center",
        alignItems:"center",
        borderRadius:20
    },
    addNewNetTitle:{
        fontSize:fontSize_15,
        color:"#3084fe"
    },

})
export default L2_ImportWay;


